<template>
  <div class="todo-item" :class="{completed: todo.isCompleted}">
    <el-checkbox
      v-model="localCompleted"
      @change="toggle"
      class="check"
      :aria-label="todo.value"
    />
    <span class="text">{{ todo.value }}</span>
    <el-button @click="$emit('delete')" circle class="del-btn" type="danger" plain>
      <el-icon><Delete /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
const props = defineProps({
  todo: Object
})
const emit = defineEmits(['toggle', 'delete'])
const localCompleted = ref(props.todo.isCompleted)
watch(() => props.todo.isCompleted, v => localCompleted.value = v)
function toggle() {
  emit('toggle')
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px 10px 18px;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: background var(--transition), color var(--transition);
  background: transparent;
}
.todo-item.completed .text {
  text-decoration: line-through;
  color: #aaa;
  opacity: 0.7;
}
.text {
  flex: 1;
  font-size: 1.08rem;
  word-break: break-all;
  transition: color var(--transition);
}
.check {
  margin-right: 2px;
}
.del-btn {
  margin-left: 8px;
  transition: background var(--transition);
}
.del-btn:hover {
  background: #ffeaea;
}
</style> 